import React, { Component } from 'react';

class Ddaojishi extends Component {
  
    constructor(props){
        super(props)
        this.state={
            hour:0,
            fenzhong:0,
            miaoshu:0
        }
    }  



    addZero(num){
        return num<10?("0"+num):num
    }
    componentDidMount(){
           //获取当前时间精确到秒
            var d = new Date();
            var year = d.getFullYear();
            var month = d.getMonth();
            month = month + 1 > 12 ? 1 : month + 1;
            month =  month > 9 ? month : "0" +month.toString();
            var day = d.getDate();
            var hour = d.getHours();
            hour = hour > 9 ? hour : "0" + hour.toString();
            var minute = d.getMinutes();
            minute = minute > 9 ? minute : "0" + minute.toString();
            var second = d.getSeconds();
            // console.log(hour)
           console.log(`${year}-${month}-${day} ${hour}:${minute}:${second}`)
            this.setState({hour:17-hour,fenzhong:60-minute,miaoshu:60-second})


     this.timerid= setInterval(()=>{
        this.state.miaoshu=this.state.miaoshu-1
            
        if( this.state.miaoshu < 0 ){
            //如果秒数小于0,秒数设置为59,分钟减1
            this.state.miaoshu = 59;
            this.state.fenzhong = this.state.fenzhong-1;
            
            if( this.state.fenzhong < 0 ){
                //如果分钟小于0,分钟设置为59,小时减1
                this.state.fenzhong = 59;
                this.state.hour = this.state.hour-1;

                if( this.state.hour < 0 ){
                    this.setState({miaoshu:0,fenzhong:0,hour:0})
                    clearInterval( this.timerid )
                }
            }
        }
            
             this.setState({miaoshu:this.state.miaoshu,fenzhong:this.state.fenzhong,hour:this.state.hour})
        },1000)
    }

    render() {
        return (
            <div className='Ddaojishi'>
               <span>  {this.addZero(this.state.hour)} </span>:
               <span> {this.addZero(this.state.fenzhong)}</span>:
               <span>  {this.addZero(this.state.miaoshu)}</span>
            </div>
        );
    }
}

export default Ddaojishi;